import EditTreeTable from '@/components/table/EditTreeTable';
import { EmployeeModel } from '@/pages/person/data';
import { deleteemployee, deptList, getemployeeList } from '@/pages/person/service';
import { buildTree } from '@/utils/treeMethod';
import {
  PageContainer,
  ProDescriptions,
  ProDescriptionsItemProps,
  type ProColumns,
} from '@ant-design/pro-components';
import { FormattedMessage } from '@umijs/max';
import { Drawer, message, TreeDataNode } from 'antd';
import React, { useEffect, useState } from 'react';

const DoorPage: React.FC = () => {
  const [selectedRows] = useState<EmployeeModel.employeeResponse[]>([]);
  const [treeDataSource, setTreeDataSource] = useState<TreeDataNode[]>([]);
  const [showDetail, setShowDetail] = useState<boolean>(false);
  const [currentRow, setCurrentRow] = useState<EmployeeModel.employeeResponse>();
  const handleRemoveRule = async () => {
    try {
      await deleteemployee({ codeList: selectedRows.map((row) => row.code!) });
      message.success('删除成功');
    } catch (error) {
      message.error('删除失败，请重试！');
    }
  };
  useEffect(() => {
    const getDeptList = async () => {
      const msg = await deptList();
      setTreeDataSource(buildTree(msg.result!));
    };
    getDeptList();
  }, []);

  const columns: ProColumns<EmployeeModel.employeeResponse>[] = [
    {
      title: '员工编号',
      dataIndex: 'code',
      editable: false,
      render: (dom, entity) => (
        <a
          onClick={() => {
            setCurrentRow(entity);
            setShowDetail(true);
          }}
        >
          {dom}
        </a>
      ),
    },
    {
      title: '员工姓名',
      dataIndex: 'name',
    },
    {
      title: '部门名称',
      dataIndex: 'organizationName',
    },
    {
      title: '角色名称',
      dataIndex: 'positionName',
    },
    {
      title: '创建时间',
      dataIndex: 'createdAt',
      hideInForm: true,
      valueType: 'dateTime',
      editable: false,
    },
  ];
  return (
    <PageContainer>
      <EditTreeTable<EmployeeModel.employeeResponse, EmployeeModel.employeeRequest>
        treeDataSource={treeDataSource}
        removeRule={() => handleRemoveRule()}
        request={async (params: EmployeeModel.employeeRequest) => {
          const msg = await getemployeeList({
            name: params.name,
            pageNum: params.current,
            pageSize: params.pageSize,
          });
          return {
            data: msg.result?.items,
            total: msg.result?.totalCount,
          };
        }}
        columns={columns}
        treeTitle="组织结构"
        checkTitle="包括子部门"
        searchPlaceholder="搜索部门"
      />
      <Drawer
        width={600}
        open={showDetail}
        onClose={() => {
          setCurrentRow(undefined);
          setShowDetail(false);
        }}
        closable={false}
      >
        {currentRow && (
          <ProDescriptions<EmployeeModel.employeeResponse>
            column={2}
            title={(currentRow as any).name}
            request={async () => ({
              data: currentRow || {},
            })}
            params={{
              id: (currentRow as any).code,
            }}
            columns={columns as ProDescriptionsItemProps<EmployeeModel.employeeResponse>[]}
          />
        )}
      </Drawer>
    </PageContainer>
  );
};

export default DoorPage;
